<template>
  <div>
    <h2>添加公共</h2>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td><span style="color: red">*</span>标题</td>
          <td>
            <input type="text" v-model="form.biaoti" />
          </td>
        </tr>
        <tr>
          <td> <span style="color: red">*</span>类型</td>
          <td>
            <select v-model="form.leixing">
              <option value="">请选择</option>
              <option>服务协议</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>图片</td>
          <td>
            <img :src="form.tupian" style="display: ''; max-width: 100px" />
            <input type="file" style="display: ''" id="file" @change="Tupian" />
          </td>
        </tr>
        <tr>
          <td><span style="color: red">*</span>状态</td>
          <td>
            <input
              type="radio"
              v-model="form.zhuangtai"
              name="zhaungtai"
              checked
            />显示
            <input type="radio" v-model="form.zhuangtai" name="zhaungtai" />隐藏
          </td>
        </tr>
        <tr>
          <td>发布人</td>
          <td>
            <input type="text" v-model="form.faburen" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button @click="Add">添加公告</button>
            <a @click="Ad" ><span style="color: aliceblue;">.</span> </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import "bootstrap/dist/css/bootstrap.min.css"

const router=useRouter();

const form=reactive({
  id: 0,
  name: "",
  pwd: "",
  biaoti: "",
  leixing: "",
  tupian: "",
  zhuangtai: "",
  faburen: "",
  stime: "",
  sdate: true
})

const Ad=()=>{
    if(form.biaoti.length>2){
        alert("标题只能是汉字");
        return;
    }
}
const Add=()=>{
    if(!form.biaoti){
        alert("标题不能为空");
        return;
    }
    if(form.biaoti.length>=50){
        alert("标题内容不大于50字");
        return;
    }
    if(!form.leixing){
        alert("类型不能为空");
        return;
    }
    if(!form.zhuangtai){
        alert("状态不能为空");
        return;
    }


            alert("添加成功");
    
     router.push("showgong");
   
}


const Tupian=(e:any)=>{
    var formdata=new FormData();
    var file=e.target.files[0];
    formdata.append("file",file);
    axios.post("https://localhost:7140/api/gonggao",formdata).then(res=>{
        form.tupian=res.data;
    })
}
</script>

<style scoped></style>
